<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./first/js/moblie.js"></script>
    <link rel="stylesheet" href="./first/js/swiper-bundle.min.css">
    <link rel="stylesheet" href="./first/iconfont/iconfont.css">
    <title>Document</title>
    <style>
         * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        .clear::after {
            display: block;
            content: "";
            clear: both;
        }
          /* 首页导航栏 */
          html {
            overflow: hidden;
            height: 100%;
        }

        body {
            height: 100%;
            overflow: auto;
        }

        .homepage {
            background-color: rgb(245, 245, 245);
            display: flex;
            display: -webkit-flex;
            min-height: 100vh;
            flex-direction: column;
        }

        .home {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            background-color: rgb(255, 255, 255);
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            z-index: 5;
            top: 0;
        }

        .chinese {
            font-size: 1.75rem;
            color: rgb(76, 76, 76);
            margin-left: 1.25rem;
            line-height: 6.25rem;
        }

        .nav {
            display: flex;
        }

        .man {
            width: 5.78rem;
            height: 3.0137rem;
            color: black;
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(224, 224, 224);
            border-radius: 1rem;
            text-align: center;
            line-height: 3.0137rem;
        }

        .woman {
            width: 5.78rem;
            height: 3.0137rem;
            color: rgb(128, 128, 128);
            background-color: rgb(224, 224, 224);
            border-radius: 1rem;
            text-align: center;
            line-height: 3.0137rem;
            margin-left: -2px;
        }

        .app {
            font-size: 1.75rem;
            font-weight: bold;
            margin-right: 1.25rem;
        }
         /* 影视同期 */
         .free {
            width: 43.8875rem;
            background-color: rgb(255, 255, 255);
            margin: 1.25rem auto;
            border-radius: 5px;
        }
        .limit {
            float: left;
            margin-left: 1.25rem;
            margin-top: 1.25rem;
        }
        .limit span {
            font-size: 2.25rem;
            font-weight: bold;
            padding-left: 2px;
        }

        .time {
            float: left;
            margin-left: 5px;
            margin-top: 2rem;
            font-size: 1.5rem;
            color: rgb(128, 128, 128);
            background-color: rgb(245,245,245);
            border-radius: .625rem;
        }
        .limit2 {
            display: flex;
            justify-content: space-between;
            margin-top: 1.25rem;
            overflow: hidden;
            overflow: scroll;
            overflow-x: auto;
        }

        .limit2::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }

        .cover {
            margin-left: 13px;
        }
        .cover div:nth-child(1) img {
            width: 8.5313rem;
            height: 11.5013rem;
            border-radius: 5px;
        }

        .cover div:nth-child(2) {
            width: 8.5313rem;
            font-size: 1.2rem;
            font-weight: bold;
            line-height: 2.5rem;
        }
        .cover div:nth-child(3) {
            color: rgb(204, 204, 204);
        }
        .one{
            margin-top: 6.25rem;
        }
         /* 经典必读 */
         .active {
            width: 43.8875rem;
            margin: 1.875rem auto;
            margin-top: 1.25rem;
            background-color: rgb(255, 255, 255);
            border-radius: 8px;
        }

        .demand {
            display: flex;
            justify-content: space-between;
            padding-top: 1.25rem;
        }

        .demand div:nth-child(1) {
            font-size: 2.15rem;

            font-weight: bold;
            margin-left: 1.25rem;
        }

        .demand div:nth-child(2) {
            color: rgb(204, 204, 204);
            font-size: 1.5rem;
            margin-right: 1.25rem;
        }

        .demand2 {
            display: flex;
            margin-top: 1.875rem;
            border-bottom: 1px solid rgb(245, 245, 246);
        }

        .book5 img {
            width: 8.5313rem;
            height: 11.5013rem;
            padding-left: 1.25rem;
        }

        .break3 {
            margin-left: 1.25rem;
        }

        .big {
            font-size: 2rem;
            font-weight: bold;
        }

        .small {
            width: 31.375rem;
            font-size: 1.5rem;
            color: rgb(150, 155, 163);

        }

        .break3 div:nth-child(3) {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .writ {
            font-size: 1.75rem;
            color: rgb(150, 155, 163);

        }

        .ser1 {
            font-size: .625rem;
        }

        .ser1 span:nth-child(1) {
            color: rgb(150, 155, 163);
            background-color: rgb(245, 245, 245);
        }

        .ser1 span:nth-child(2) {
            color: rgb(150, 155, 163);
            background-color: rgb(245, 245, 245);
        }

        .ser1 span:nth-child(3) {
            color: rgb(150, 155, 163);
            background-color: rgb(245, 245, 245);
        }
         /* qq登录 */
         .login {
            width: 51.05rem;
            height: 7.21rem;
          
            text-align: center;
            line-height: 7.21rem;
            border-bottom: 1px solid rgb(204, 204, 204);
        }

        .login span {
            font-size: 2rem;
            font-weight: bold;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

        }

        .login a {
            font-size: 2rem;
            color: rgb(66, 132, 237);
        }

        /* qq阅读 */
        .read {
           
            line-height: 8.75rem;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }

        .read div {
            font-size: 2rem;
            color: rgb(150, 155, 163);
        }

        /*  */
        .touch {
          
            line-height: 8.75rem;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .touch div {
            font-size: 2rem;
            color: rgb(150, 155, 163);
        }

        .touch div:hover {
            color: black;
        }

        /*  */
        .ser {
        
            text-align: center;
            font-size: 1.75rem;
            color: rgb(150, 155, 163);
            padding-bottom: 7.5rem;
        }

        /* 尾页 */
        .tail {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .below {
            margin: 0 auto;
            width: 42.8813rem;
            text-align: center;
            background-color: rgb(250, 56, 68);
            border-radius: 2.25rem;

        }

        .below span {
            color: white;
            font-size: 1.75rem;
            line-height: 4.2188rem;
        }
        .one{
            margin-top: 6.25rem;
        }
    </style>
</head>
<body>
    <div class="homepage">
    <!-- 首页导航栏 -->
        <div class="home">
            <div class="chinese"><span class="iconfont icon-youjiantou1"></span>完本</div>
            <div class="nav">
                <div class="man">男生</div>
                <div class="woman">女生</div>
            </div>
            <div class="app"><span class="iconfont icon-sousu"></span>
                <span class="iconfont icon-wu"></span>
            </div>
        </div>
    <!-- 影视同期 -->
    <div class="one">
        <div class="free">
            <div class=" clear">
                <div class="limit">
                    <span>影视同期</span>
                </div>
                <div class="time">
                    火热影视原作
                </div>
            </div>
            <div class="limit2">
                <div class="cover">
                    <div><img src="./first/img/7/1.webp"></div>
                    <div>庆余年</div>
                    <div>猫腻</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/2.webp"></div>
                    <div>将夜</div>
                    <div>猫腻</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/3.webp"></div>
                    <div>斗破苍穹</div>
                    <div>天蚕土豆</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/4.webp"></div>
                    <div>斗罗大陆</div>
                    <div>唐家三少</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/5.webp"></div>
                    <div>择天记</div>
                    <div>猫腻</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/6.webp"></div>
                    <div>回到明朝当王爷</div>
                    <div>月关</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/7.webp"></div>
                    <div>全职高手</div>
                    <div>蝴蝶蓝</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/8.webp"></div>
                    <div>盗墓笔记</div>
                    <div>南派三叔</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/9.webp"></div>
                    <div>鬼吹灯（盗墓者的经历）</div>
                    <div>本物天下霸...</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/10.webp"></div>
                    <div>鬼吹灯||</div>
                    <div>本物天下霸...</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/11.webp"></div>
                    <div>从前有座灵剑山</div>
                    <div>国王陛下</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/12.webp"></div>
                    <div>冠军之光</div>
                    <div>林海听涛</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/13.webp"></div>
                    <div>大泼猴</div>
                    <div>甲鱼不是龟</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/7/14.webp"></div>
                    <div>诛仙（电视名：诛仙...）</div>
                    <div>萧鼎</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 经典必读 -->
    <div class="active">
        <div class="demand">
            <div>经典必读
            </div>
            <div>更多<span class="iconfont icon-youjiantou"></span></div>
        </div>
        <div class="demand2">
            <div class="book5"><img src="./first/img/7/20.webp"></div>
            <div class="break3">
                <div class="big">圣墟</div>
                <div class="small">在破败中崛起，在寂灭中复苏。沧海成尘，雷电枯竭，那一缕幽雾有一次临近...</div>
                <div>
                    <div class="writ">辰东</div>
                    <div class="ser1">
                        <span>玄幻</span>
                        <span>完结</span>
                        <span>613.23万字</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="demand2">
            <div class="book5"><img src="./first/img/7/21.webp"></div>
            <div class="break3">
                <div class="big">诡秘之主</div>
                <div class="small">蒸汽与机械的浪潮中，谁能触及非凡？历史和黑暗的迷雾里，又是谁在耳语？我</div>
                <div>
                    <div class="writ"><span class="iconfont icon-zhanghu"></span>爱潜水的乌贼</div>
                    <div class="ser1">
                        <span>玄幻</span>
                        <span>完结</span>
                        <span>446.53万字</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="demand2">
            <div class="book5"><img src="./first/img/7/22.webp"></div>
            <div class="break3">
                <div class="big">大奉打更人</div>
                <div class="small">《大奉打更人》（第一卷）实体书已在天猫，当当，京东等全面平台，以及各个实</div>
                <div>
                    <div class="writ"><span class="iconfont icon-zhanghu"></span>卖报小郎君</div>
                    <div class="ser1">
                        <span>仙侠</span>
                        <span>完结</span>
                        <span>380.11万字</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 大神完本 -->
    <div class="active">
        <div class="demand">
            <div>大神完本
            </div>
            <div>更多<span class="iconfont icon-youjiantou"></span></div>
        </div>
        <div class="demand2">
            <div class="book5"><img src="./first/img/7/30.webp"></div>
            <div class="break3">
                <div class="big">此后我为栋梁</div>
                <div class="small">来阅文旗下网站阅读我的更多作品吧！</div>
                <div>
                    <div class="writ">雁九</div>
                    <div class="ser1">
                        <span>短篇</span>
                        <span>完本</span>
                        <span>339万字</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="demand2">
            <div class="book5"><img src="./first/img/7/31.webp"></div>
            <div class="break3">
                <div class="big">万界点名册</div>
                <div class="small">（三年后的我会是什么形状？）大学宿舍中，失眠的许奇寂在思考。次日，清晨...</div>
                <div>
                    <div class="writ"><span class="iconfont icon-zhanghu"></span>圣骑士的传说</div>
                    <div class="ser1">
                        <span>都市</span>
                        <span>完本</span>
                        <span>102.1万字</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="demand2">
            <div class="book5"><img src="./first/img/7/32.webp"></div>
            <div class="break3">
                <div class="big">天牧</div>
                <div class="small">天荒我未老，先灭我重生，踏八荒，因为寻一人！斩众神，只求一因果。苍天之...</div>
                <div>
                    <div class="writ"><span class="iconfont icon-zhanghu"></span>厌笔箫生</div>
                    <div class="ser1">
                        <span>玄幻</span>
                        <span>完本</span>
                        <span>346.19万字</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 畅销完本 -->
    <div class="active">
        <div class="demand">
            <div>畅销完本
            </div>
            <div>更多<span class="iconfont icon-youjiantou"></span></div>
        </div>
        <div class="demand2">
            <div class="book5"><img src="./first/img/7/40.webp"></div>
            <div class="break3">
                <div class="big">全职高手</div>
                <div class="small">网游荣耀中被誉为教科书级别的顶尖高手，因为种种原因遭到俱乐部的驱逐，..</div>
                <div>
                    <div class="writ">蝴蝶蓝</div>
                    <div class="ser1">
                        <span>游戏</span>
                        <span>完本</span>
                        <span>535.02万字</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="demand2">
            <div class="book5"><img src="./first/img/7/41.webp"></div>
            <div class="break3">
                <div class="big">完美世界</div>
                <div class="small">一粒尘可填海，一根草斩尽日月星辰，弹指间天翻地覆。群雄并起，万族林立，...</div>
                <div>
                    <div class="writ"><span class="iconfont icon-zhanghu"></span>辰东</div>
                    <div class="ser1">
                        <span>玄幻</span>
                        <span>完本</span>
                        <span>658.34万字</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="demand2">
            <div class="book5"><img src="./first/img/7/42.webp"></div>
            <div class="break3">
                <div class="big">飞天</div>
                <div class="small">苍穹之下时态炎凉，妖魔鬼怪不敌人情冷暖！芊芊柔夷，美人如玉，怎奈天地之...</div>
                <div>
                    <div class="writ"><span class="iconfont icon-zhanghu"></span>跃千愁</div>
                    <div class="ser1">
                        <span>仙侠</span>
                        <span>完本</span>
                        <span>698.48万字</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
      <!-- 立即登录 -->
      <div class="login">
        <span>登录后获得更多特色功能 · </span><a href="###">立即登录</a>
    </div>
    <!-- qq阅读 -->
    <div class="read">
        <div>QQ阅读</div>
        <div>红袖添香</div>
    </div>
    <!--  -->
    <div class="touch">
        <div>客户端</div>
        <div>触屏版</div>
        <div>帮助与客服</div>
        <div>搜索</div>
    </div>
    <!--  -->
    <div class="ser">
        <div>网站备案/许可证号：泸B2-20080046-1</div>
        <div>互联网宗教信息服务许可证 编号：泸（2022）00000022</div>
        <div>copyright© 2022-2023 m.qidian.com</div>
    </div>
    <!-- 尾页 -->
    <div class="tail">
        <div class="below">
            <span>下载起点读书，新用户免费读14天</span>
        </div>
    </div>
    </div>
</body>
</html>